<template>
  <div class="classroom-manage">
    <!--  列表描述部分-->
    <el-card>
      <div class="desc-box">
        <div class="title">教室列表</div>
        <div class="desc">您可以对教室管理下的列表进行增删改查的操作，也可以为教室分配校区！</div>
      </div>

      <div class="use-box">
        <div>
          <el-button class="add-button" type="primary" @click="openAddAndEditDialogDialog(0)">添加教室</el-button>
        </div>
        <div class="search-box">
          <div>
            <span class="search-name">校区 :</span>
            <el-select v-model="queryInfo.CampusID" placeholder="请选择绑定的校区">
              <el-option label="-----查询全部-----" :value="0"></el-option>
              <el-option v-for="(item,index) in campusDataList" :key="index"
                         :label="item.Text" :value="item.Value">
              </el-option>
            </el-select>
          </div>
          <div class="search-input">
            <el-input clearable @clear="getClassroomList"
                      v-model="queryInfo.RoomName" placeholder="请输入教室名称">
            </el-input>
          </div>
          <div>
            <el-button type="primary" class="search-button" @click="getClassroomList">查询</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="second-card">
      <el-table :data="classroomList"
                style="width: 100%"
                border v-loading="loading"
                element-loading-text="拼命加载中......"
                :header-cell-class-name="setHeaderRowClassName"
                max-height="530px"
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="RoomName" label="教室名称"></el-table-column>
        <el-table-column prop="Address" label="教室地址"></el-table-column>
        <el-table-column prop="Introduce" label="教室说明"></el-table-column>
        <el-table-column prop="CampusName" label="绑定校区"></el-table-column>

        <el-table-column label="启停状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.Status" :active-value="1"
                       :inactive-value="0" @change="statusChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="openAddAndEditDialogDialog(scope.row.ID)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>
    </el-card>

    <!--  对话框组件-->
    <add-and-edit-dialog v-if="isShowDialogComponent" :title="title"
                         :is-show-dialog-component="isShowDialogComponent"
                         @handleClose="handleClose" :judge-id="judgeId"
    ></add-and-edit-dialog>

  </div>
</template>

<script>
//引入对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
import Pagination from '../../components/base/pagination/Pagination'
//引入网络封装
import ClassroomManage from '../../model/classroomManage'
//引入封装的校区的类
import Campus from '../../model/campus'

export default {
  name: 'ClassroomManage',
  components: {
    AddAndEditDialog,
    Pagination
  },
  data () {
    return {
      loading: false,
      isShowDialogComponent: false,
      title: '',
      judgeId: 0,
      //保存获取到的校区的数据
      campusDataList: [],
      //教室列表
      classroomList: [],
      //获取教室列表所传参数
      queryInfo: {
        CampusID: 0,
        RoomName: '',
        Page: 1,
        Limit: 10,
        total: 0,
      },
    }
  },
  created () {
    //调用获取教室列表
    this.getClassroomList()
    //调用获取校区集合的方法
    this.getCampusDataList()
  },
  methods: {
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'setHeaderSubjectColumnName'
      }
    },
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getClassroomList()
    },
    //打开添加对话框
    openAddAndEditDialogDialog (id) {
      this.title = id === 0 ? '添加教室' : '编辑教室'
      this.judgeId = id === 0 ? 0 : id
      this.isShowDialogComponent = true
    },
    //对话框关闭传出的事件
    handleClose (payload) {
      if (payload === 'submitButton') {
        this.getClassroomList()
      }
      this.isShowDialogComponent = false
    },
    //查询校区集合
    async getCampusDataList () {
      this.campusDataList = await Campus.PageSearchList()
    },
    //获取教室列表信息
    async getClassroomList () {
      this.loading = true
      const res = await ClassroomManage.getClassroomList(this.queryInfo)
      this.loading = false
      this.classroomList = res.ListData
      this.queryInfo.total = res.Total
    },
    //点击状态按钮触发
    async statusChange (rowInfo) {
      await ClassroomManage.statusChange(rowInfo.ID, rowInfo.Status)
      this.$message.success('成功修改教室启停状态')
      await this.getClassroomList()
    },
    //删除操作
    async deleteInfo (rowInfo) {
      const confirmResult = await this.$confirm('此操作将永久删除该教室信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该教室信息')
      } else {
        ClassroomManage.deleteClassroom(rowInfo.ID)
        this.$message.success('成功删除该教室信息')
        await this.getClassroomList()
      }
    }
  }
}
</script>

<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";

.classroom-manage {
  background-color: #eee;
}

.second-card {
  padding-bottom: 50px;
  position: relative;
}

/deep/ .el-pagination {
  margin-top: 20px;
  position: absolute;
  right: 20px;
}

/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}
</style>
